<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <ul></ul>

    <script>

        // 重绘：颜色的改变 --- 不影响布局的   color  background-color

        // 回流：结构的改变  --- margin  width  height  display:none

        // 重绘和回流是无法避免的

        // 重绘不一定引发回流，回流必定引发重绘  --- 回流的代码大于重绘

        // 尽量的减少回流和重绘

        var oUl = document.querySelector('ul');

        // 文档碎片
        var fragment = document.createDocumentFragment();

        for (var i = 0; i < 100; i++) {
            var oLi = document.createElement('li');
            oLi.innerHTML = i;
            fragment.appendChild(oLi);
        }

        oUl.appendChild(fragment);


        // 文档碎片
        //    把所有创建的li标签存到文档碎片中，最后一次性把文档碎片插入到ul中，最终只回流一次




        // var res = '' ;

        // res += '100ge' ;

        // oUl.innerHTML = res ;


    </script>

</body>

</html>